<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      width: 200px;
      height: 200px;
      background-color: pink;
      margin-top: 20px;
    }
    .son {
      width: 100px;
      height: 100px;
      background-color: skyblue;
    }
    /* ul li{
      background-color: pink;
      margin-top: 5px;
    } */
  </style>
</head>

<body>
  <div id="app">
    <h3>v-model修饰符 .trim .number</h3>
    姓名：<input v-model.trim="username" type="text"><br>
    年纪：<input v-model.number="age" type="text"><br>
    <!-- 默认就是有冒泡机制的 -->
     <!-- <ul @click="deachick">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
     </ul> -->


    <h3>@事件名.stop → 阻止冒泡</h3>
    <div @click="fatherFn" class="father">
      <!-- <div @click.stop="sonFn" class="son">儿子</div> -->
       <div @click="sonFn" class="son">儿子</div>
    </div>

    <h3>@事件名.prevent → 阻止默认行为</h3>
    <!-- <a @click="gBaidu" href="http://www.baidu.com">阻止默认行为</a> -->
    <!-- <a @click.prevent="gBaidu" href="http://www.baidu.com">阻止默认行为</a> -->
    <a @click="gBaidu" href="http://www.baidu.com">阻止默认行为</a>
  </div>
  <script src="./vue.js"></script>
  <script>
    /*
      事件修饰符
         @事件名.stop     →   阻止冒泡
         @事件名.prevent  →   阻止默认行为
    */
    const app = new Vue({
      el: '#app',
      data: {
        username: '',
        age: '',
      },
      methods: {
        fatherFn() {
          alert('老父亲被点击了')
        },
        sonFn(e) {
         // 阻止冒泡
         e.stopPropagation();
          alert('儿子被点击了')
        },
        gBaidu(e) {
            // 阻止默认行为
            e.preventDefault();
          console.log('跳转到百度');
          setTimeout(() => {
            window.location.href = "https://www.jd.com"
          }, 3000);
        },
        // deachick(e){
        //   console.log('点击了',e.target)
        // }
      }
    })
  </script>
</body>

</html>